<style lang="less">
@import '../styles/menu.less';
</style>

<template>
    <!-- :active-name="$route.name" -->
    <Menu :active-name="activeRoute" :accordion="true" :open-names="openNames" :theme="menuTheme" width="auto" @on-select="changeMenu">
        <template v-for="item in menuList">
            <MenuItem v-if="item.children.length<=1" :name="item.children[0].name" :key="'menuitem' + item.name">
                <c-icon
                    :name="getIconName(item,activeRoute)"
                    align="middle"
                    className="icon-large margin-r-6"
                    :key="item.icon"></c-icon>
                <span class="layout-text" :key="'title' + item.name">{{ itemTitle(item.children[0]) }}</span>
            </MenuItem>

            <Submenu v-if="item.children.length > 1" :name="item.name" :key="item.name">

                <template slot="title">
                    <c-icon
                        :name="getIconName(item,activeRoute)"
                        align="middle"
                        className="icon-large margin-r-6"
                        :key="item.icon"></c-icon>
                    <span class="layout-text">{{ itemTitle(item) }}</span>
                </template>

                <template v-for="child in item.children">
                    <MenuItem :name="child.name" :key="'menuitem' + child.name">
                        <span class="layout-text" :key="'title' + child.name">{{ itemTitle(child) }}</span>
                    </MenuItem>
                </template>

            </Submenu>
        </template>
    </Menu>
</template>

<script>
export default {
  name: 'sidebarMenu',
  props: {
    menuList: Array,
    iconSize: Number,
    menuTheme: {
      type: String,
      default: 'dark'
    },
    openNames: {
      type: Array
    }
  },
  data () {
    return {
      activeRoute: ''
    }
  },
  methods: {
    changeMenu (active) {
      this.$emit('on-change', active)
    },
    itemTitle (item) {
      if (typeof item.title === 'object') {
        return this.$t(item.title.i18n)
      } else {
        return item.title
      }
    },
    getIconName (menuItem, activeRoute) {
      // 选中的菜单为蓝色图标
      // const matched = menuItem.children.some(item => {
      //     return item.name === activeRoute
      // })
      const matched = menuItem.children.length === 1 && menuItem.children[0].name === activeRoute
      return matched ? menuItem.icon : menuItem.icon + '1'
    }
  },
  // computed:{
  //     activeRoute () {
  //         return this.$route.name.indexOf('tenancy_') > -1
  //             ? 'tenancy_index'
  //             : this.$route.name
  //     }
  // },
  watch: {
    // 解决刷新页面后菜单不会高亮显示
    '$store.state.app.menuList' (newVal) {
      if (newVal) {
        this.$nextTick(() => {
          this.activeRoute = this.$route.name === 'tenancy_home-detail' ? 'tenancy_index' : this.$route.name
        })
      }
    },
    $route (newVal) {
      this.activeRoute = newVal.name === 'tenancy_home-detail' ? 'tenancy_index' : newVal.name
    }
  }
}
</script>
